<template>
  <div>
      <div @click="isShowDialog=true">
          <p style="text-decoration: underline;cursor: pointer;color:white">举报该用户</p>
      </div>
        <el-dialog
            v-model="isShowDialog"
            title="举报"
            width="40%"
        > <el-divider></el-divider>
            <div class="outer">
                <p>举报原因</p>
                <el-select v-model="type" placeholder="请选择举报原因">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    >
                    </el-option>
                </el-select>
                <p style="margin-top:4rem">补充文字描述</p>
                <el-input v-model="reason" :rows="6" type="textarea" placeholder="请详细描述您的举报理由(不多于500字)："></el-input>
                <p style="margin-top:4rem">举报图片补充:</p>
                <el-upload
                    ref="upload"
                    action="action"
                    class="upload-demo"
                    :http-request='uploadImage'
                    :file-list="fileList"
                    accept="image/jpeg,image/png,image/jpg"
                    :before-upload="onBeforeUploadImage"
                    :auto-upload="false"
                >
                  <template #trigger>
                    <el-button size="small" type="primary">选择图片</el-button>
                  </template>
                  <p></p>
                  <template #tip>
                    <div class="el-upload__tip">
                      图片大小不超过1Mb
                    </div>
                  </template>
                </el-upload>                
            </div>
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="isShowDialog = false">取消</el-button>
                <el-button type="primary" @click="submitUpload"
                >确认</el-button
                >
            </span>
            </template>           
        </el-dialog>      
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'Inform',
  components:{
      
  },
  props: {
      userId:String,
      userIdIn:String,
  },
  data() {
    return {
        isShowDialog:false,
        url:'/api/scholar/complain-scholar',
        fileList: [],
        options: [
        {
          value: '1',
          label: '发表不当言论',
        },
        {
          value: '1',
          label: '私信骚扰',
        },
        {
          value: '1',
          label: '个人信息不实',
        },
        {
          value: '1',
          label: '冒领论文',
        },
      ],
    
        complainedid:"",
        reason:"",
        type:"",
    }
  },
  mounted:function(){
    this.complainedid=this.userId;
  },
  methods: {
    onBeforeUploadImage(file) {
      const isIMAGE = file.type === 'image/jpeg' || 'image/jpg' || 'image/png'
      const isLt1M = file.size / 1024 / 1024 < 1
      if (!isIMAGE) {
        this.$message.error('上传文件只能是图片格式!')
      }
      if (!isLt1M) {
        this.$message.error('上传文件大小不能超过 1MB!')
      }
      return isIMAGE && isLt1M
    },
    uploadImage(param){
      console.log("test");
      const formData = new FormData()
      formData.append('file', param.file)
      formData.append('type', '1');
      formData.append('complainedid', this.complainedid);
      formData.append('reason',this.reason);
      formData.append('userId',this.userIdIn);
      console.log(formData);
      axios.post(this.url,formData)
        .then(res => {
          console.log(res);
          console.log('res');
          if (res.data.code == 200){
          	this.$message.success('举报已上传，请等待通知')
          } else {
            this.$message.error('举报上传失败')
          }
        })
    },
    submitUpload:function(){
      console.log("test"+this.userId);
      console.log("test"+this.userIdIn)
      let num=this.$refs.upload.uploadFiles.length;
      if(num>0)
      this.$refs.upload.submit();
      else{
      let formData=new FormData();
      formData.append('type', '1');
      formData.append('complainedid', this.complainedid);
      formData.append('reason',this.reason);
      formData.append('userId',this.userIdIn);
      let data={};
      data.type=1;
      data.complainedid=this.complainedid;
      data.reason=this.reason;
      data.userId=this.userId;
      console.log(data);
      axios.post(this.url, formData)
        .then(res => {
          console.log(res);
          console.log('res');
          if (res.data.code == 200){
          	this.$message.success('举报已上传，请等待通知')
          } else {
            this.$message.error('举报上传失败')
          }
        })
      }
    },
  }
}
</script>

<style scoped>
.outer{
    width: 30rem;
    height: 20rem;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}
</style>